<!--
车型选择器
@author:何世华
-->
<template>
  <div class="sh_car_selector"
       :class="{
                sh_car_selector_show:is_show,
          }">
   <!-- <div class="sh_car_selector_header"
         :class="{sh_car_android:!is_weixin&&device_header=='android',
                sh_car_ios:!is_weixin&&device_header=='ios',
                sh_car_iphonex:!is_weixin&&device_header=='iphonex'}">

    </div>-->
    <div class="sh_car_selector_inner">
      <!-- 品牌列表 -->
      <sh-iscroll ref="sh_car_selector_inner"
                  @scroll="scrollList"
                  :options="{probeType:3,preventDefault: true,momentum:false}">
        <div class="sh_car_selector_list"
             v-for="(item,index) in car_list">
          <div :id="item.brand_type" class="sh_car_selector_title">
            {{item.brand_type}}
          </div>
          <div class="sh_car_selector_item"
               @tap="showCarType(item2)"
               v-for="(item2,index2) in item.brand_list">
            <div class="sh_car_selector_item_inner">
              <div class="sh_car_selector_icon">
                <img :src="item2.brand_icon" alt="">
              </div>
              <div class="sh_car_selector_content">
                {{item2.brand_name}}
              </div>
            </div>
          </div>
        </div>
      </sh-iscroll>

      <!--字母表-->
      <div class="sh_car_selector_letters">
        <div class="sh_car_selector_letters_inner"
             @touchstart.prevent="touchLetter"
             @touchmove.prevent="touchLetter"
             @touchend.prevent="closeLetterPreview"
             ref="sh_car_selector_letters_inner">
          <div class="sh_car_selector_letter"
               :class="{sh_letter_active:active_index == index}"
               v-for="(item,index) in car_list">
            {{item.brand_type}}

            <div class="sh_car_selector_letter_preview"
                 v-if="active_index == index && show_letter_preview">
              {{item.brand_type}}
            </div>
          </div>
        </div>
      </div>

      <!-- 车型列表 -->
      <div class="sh_car_type"
           :class="{sh_car_type_show:show_car_type}"
           @tap="closeCarType()">
        <div class="sh_car_type_list"
             :class="{
                        sh_car_type_list_show:show_car_type,
                  }">
          <sh-iscroll ref="sh_car_type_list" :options="{preventDefault: true}">
            <div class="sh_car_type_item"
                 @tap="selectCarType(item)"
                 :key="item.id"
                 v-for="(item,index) in car_type_list">
              <div class="sh_car_type_item_inner">
                <div class="sh_car_type_icon">
                  <img :src="item.model_icon" alt="">
                </div>
                <div class="sh_car_type_content">
                  {{item.model_name}}
                </div>
              </div>
            </div>
          </sh-iscroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import ShIscroll from './sh-iscroll.vue'
  //  import utils from 'utils'
  let utils = {
    ua: navigator.userAgent,
    //ios
    isIos() {
      return utils.ua.match(/iPhone|iPod|iPad/i);
    },
    //安卓
    isAndroid() {
      return utils.ua.match(/Android/i)
    },
    //iphoneX
    isIphoneX() {
      if (utils.isIos()) {
        return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375);
      } else {
        return false;
      }
    },
    //微信
    isWeixin() {
      return utils.ua.match(/MicroMessenger/i);
    },
    //获取前缀（其实是后缀）
    getPrefix() { //截取当前host有没有后缀 如-dev 、-test等
      let wlh = window.location.host.toString();
      let prefix = '';
      if (wlh.indexOf('-dev') !== -1) {
        prefix = '-dev';
      } else if (wlh.indexOf('-test') !== -1) {
        prefix = '-test';
      }
      return prefix;
    },
  };

  export default {
    name: 'sh-car-selector',
    components: {
      "sh-iscroll": ShIscroll,
    },
    props: [
      'value',
      'is_show',//是否展示
      'head_view',//是否有头部
    ],
    data() {
      return {
        car_list: [],//总表
        active_index: 0,//选中的字母索引
        show_car_type: false,
        car_brand: '',//品牌
        car_type_list: [],//型号列表
        show_letter_preview: false,
        cur_head_view: true,
        is_weixin: utils.isWeixin(),
      }
    },
    mounted() {
      this.car_list = JSON.parse(localStorage.getItem('CAR_LIST'));
      if (!this.car_list) {
        this.init();
      }else{
        this.$nextTick(() => {
          this.$refs.sh_car_selector_inner.refresh();
        });
      }
      this.cur_head_view = this.head_view
    },
    methods: {
      init() {
        $.ajax({
          url: `https://m${utils.getPrefix()}.etcchebao.com/app/getCarList`,
          dataType: 'jsonp',
          success: (json)=>{
            if (json.code == 0) {
              console.log("数据加载成功");
              this.car_list = json.data.car.list;
              localStorage.setItem('CAR_LIST', JSON.stringify(this.car_list));
              this.$nextTick(() => {
                console.log("刷新");
                this.$refs.sh_car_selector_inner.refresh();
              });
            } else {
              console.error(json.msg);
            }
          }
        });
      },
      touchLetter(e) {
        this.show_letter_preview = true;
        let letter_inner = this.$refs.sh_car_selector_letters_inner;
//        console.log(e);
//        console.log(e.changedTouches[0].clientY, letter_inner.offsetTop);
        let offsetY = e.changedTouches[0].clientY - letter_inner.offsetTop - this.header_height;
        let min = 0;
        let max = letter_inner.clientHeight;
        if (offsetY < min) {
          offsetY = min;
        } else if (offsetY > max) {
          offsetY = max;
        }
        let percent = offsetY * 100 / (max - min);
//                console.log(percent);
        let letter_index = parseInt(this.car_list.length * percent / 100);
        if (letter_index > this.car_list.length - 1) {
          letter_index = this.car_list.length - 1;
        }
        let car = this.car_list[letter_index] || {};
        this.active_index = letter_index;

        let list = document.querySelectorAll('.sh_car_selector_list')[letter_index];
//                console.log(list.offsetTop);
        this.$refs.sh_car_selector_inner.scrollTo(0, -list.offsetTop);
      },
      closeLetterPreview() {
        this.show_letter_preview = false;
      },
      scrollList(iscroll) {
//        console.log(iscroll.y);
        let list = document.querySelectorAll('.sh_car_selector_list');
        list = Array.prototype.slice.call(list);
        if (iscroll.y > 0) {
          this.active_index = 0;
        } else {
          for (let i = 0; i < list.length; i++) {
            let item = list[i];
            if (item.offsetTop >= -iscroll.y) {
              this.active_index = i - 1;
              break;
            }
          }
        }
      },
      showCarType(item) {
        this.show_car_type = true;
        this.car_brand = item.brand_name;
        if (this.show_car_type) {
          this.car_type_list = item.model_list;
          this.$nextTick(() => {
            this.$refs.sh_car_type_list.refresh();
            this.$refs.sh_car_type_list.scrollTo(0, 0);
          });

        }
      },
      selectCarType(item) {
//        history.back();
        item.brand = this.car_brand;
        this.$emit('input', item);
        this.$emit('update:is_show', false);
        this.closeCarType();
      },
      closeCarType() {
        this.show_car_type = false;
      },
      getFontSize() {
        let font_size_str = document.documentElement.style.fontSize;
        return font_size_str.replace('px', '') * 1;
      }

    },
    computed: {
      device_header() {
        if (this.cur_head_view) {
          if (utils.isAndroid()) {
            return "android";
          } else if (utils.isIos()) {
            if (utils.isIphoneX()) {
              return "iphonex";
            } else {
              return "ios";
            }
          }
        }
        return "";
      },
      header_height() {
        let e_header = document.querySelector('header');
        return e_header ? e_header.offsetHeight : 0;
      }
    },
    watch: {},
  };
</script>
<style>
  .sh_car_selector {
    background-color: #fff;
    position: absolute;
    top: 0;
    transform: translateX(110%);
    height: 100%;
    width: 100%;
    transition: transform 0.5s cubic-bezier(.55, 0, .1, 1);
    box-shadow: -0.25rem 0 0.5rem rgba(0, 0, 0, 0.2);
    z-index: 9998;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
  }

  .sh_car_selector.sh_car_selector_show {
    transform: translateX(0);
  }

  /*.sh_car_iphonex {
    height: 3.85rem;
  }

  .sh_car_ios {
    height: 3.35rem;
  }

  .sh_car_android {
    height: 2.35rem;
  }*/

  .sh_car_selector_inner {
    flex: 1;
    -webkit-flex: 1;
    background: #fff;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    /*-webkit-overflow-scrolling: touch;*/
    position: relative;
  }

  .sh_car_selector_list {
  }

  .sh_car_selector_title {
    padding-left: 1rem;
    background: #f9f9f9;
    line-height: 200%;
  }

  .sh_car_selector_item {
    padding-left: 1rem;
  }

  .sh_car_selector_item:active {
    background: #ebebeb;
  }

  .sh_car_selector_item_inner {
    padding: 0.5rem 0;
    line-height: 150%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    border-bottom: 1px solid #ebebeb;
  }

  .sh_car_selector_item:last-of-type > .sh_car_selector_item_inner {
    border-bottom: 0;
  }

  .sh_car_selector_icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
  }

  .sh_car_selector_content {
    flex: 1;
    -webkit-flex: 1;
    line-height: 1.5rem;
  }

  .sh_car_selector_letters {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
  }

  .sh_car_selector_letters_inner {
    width: 0.95rem;
    text-align: center;
    background: #ffffff;
  }

  .sh_car_selector_letter {
    height: 0.95rem;
    line-height: 0.95rem;
    color: #666666;
    font-size: 0.6rem;
    position: relative;
  }

  .sh_car_selector_letter_preview {
    position: absolute;
    background: #c8c8c8;
    font-size: 1rem;
    line-height: 100%;
    top: -0.5rem;
    left: -300%;
    padding: 0.5rem;
    border-radius: 5rem;
    color: #ffffff;
    width: 1rem;
    height: 1rem;
    text-align: center;
  }

  .sh_car_selector_letter_preview:after {
    position: absolute;
    content: '';
    border-left: 0.5rem solid #c8c8c8;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
    border-right: 0;
    right: -0.3rem;
    top: 0;
    bottom: 0;
    height: 0;
    margin: auto 0;
  }

  .sh_letter_active {
    background: #f1cf92;
    border-radius: 1rem;
    color: #222222;
  }

  .sh_car_type {
    -webkit-transform: translate3d(0, 0, 0); /*兼容IOS11*/
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;

  }

  .sh_car_type_show {
    transition: opacity 0.5s cubic-bezier(.55, 0, .1, 1);
    z-index: 101;
    opacity: 1;
    left: 0;
  }

  .sh_car_type_list {
    -webkit-transform: translate3d(0, 0, 0); /*兼容IOS11*/
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 75%;
    z-index: 20000;
    transform: translateX(100%);
    background: #ffffff;
    overflow: auto;
    transition: transform 0.5s cubic-bezier(.55, 0, .1, 1);
    /*-webkit-overflow-scrolling: touch;*/
    box-sizing: border-box;
  }

  .sh_car_type_list_show {
    transform: translateX(0);
  }

  .sh_car_type_item {
    padding-left: 1rem;
  }

  .sh_car_type_item:active {
    background: #ebebeb;
  }

  .sh_car_type_item_inner {
    padding: 0.5rem 0;
    line-height: 150%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    border-bottom: 1px solid #ebebeb;
  }

  .sh_car_type_item_inner:last-of-type > .sh_car_type_item_inner {
    border-bottom: 0;
  }

  .sh_car_type_icon {
    width: 2rem;
    height: 1.5rem;
    margin-right: 0.5rem;
  }

  .sh_car_type_content {
    flex: 1;
    -webkit-flex: 1;
    line-height: 1.5rem;
  }
</style>
